<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>清新渐变弹幕系统</title>
  <style>
    body {
      margin: 0;
      font-family: "Segoe UI", sans-serif;
      background: linear-gradient(135deg, #89f7fe, #66a6ff);
      color: #333;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      padding: 20px;
    }
    h1 {
      margin: 10px 0;
      font-weight: 500;
      color: #222;
    }
    #screen {
      position: relative;
      width: 100%;
      max-width: 800px;
      height: 450px;
      background: #000;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 20px;
      box-shadow: 0 8px 25px rgba(0,0,0,.3);
    }
    .danmu {
      position: absolute;
      white-space: nowrap;
      font-size: 18px;
      font-weight: 500;
      padding: 6px 14px;
      border-radius: 18px;
      background: rgba(255,255,255,0.15);
      color: #fff;
      transition: transform 0.3s;
      cursor: pointer;
    }
    .danmu:hover {
      transform: scale(1.08);
      background: rgba(255,255,255,0.3);
    }
    .input-bar {
      display: flex;
      gap: 10px;
      width: 100%;
      max-width: 800px;
    }
    .input-bar input {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      border: 1px solid #ccc;
      outline: none;
      font-size: 16px;
    }
    .input-bar button {
      padding: 10px 18px;
      border: none;
      border-radius: 8px;
      background: #66a6ff;
      color: white;
      cursor: pointer;
      transition: background .3s;
    }
    .input-bar button:hover {
      background: #4a90e2;
    }
  </style>
</head>
<body>
  <h1>🌈 清新渐变弹幕系统</h1>
  <div id="screen"></div>
  <div class="input-bar">
    <input type="text" id="msg" placeholder="输入弹幕...">
    <button id="sendBtn">发送</button>
  </div>

<script>
  const screen = document.getElementById("screen");
  const input = document.getElementById("msg");
  const btn = document.getElementById("sendBtn");

  let speed = 2.5, slowdown = 4;

  function createDanmu(text){
    const el = document.createElement("div");
    el.className = "danmu";
    el.innerText = text;
    el.style.top = Math.random() * 90 + "%";
    el.style.left = screen.offsetWidth + "px";

    screen.appendChild(el);
    let left = screen.offsetWidth;

    let timer = setInterval(()=>{
      left -= el.isHover ? speed/slowdown : speed;
      el.style.left = left + "px";
      if(left < -el.offsetWidth){
        screen.removeChild(el);
        clearInterval(timer);
      }
    },16);

    el.addEventListener("mouseenter",()=>el.isHover=true);
    el.addEventListener("mouseleave",()=>el.isHover=false);
  }

  function send(){
    const val = input.value.trim();
    if(val){
      createDanmu(val);
      input.value="";
    }
  }

  btn.onclick=send;
  input.onkeypress=e=>{if(e.key==="Enter") send();};

  setTimeout(()=>{
    ["🌟 欢迎进入清新风格！","✨ 悬停减速试试","🎬 弹幕体验升级"].forEach(txt=>createDanmu(txt));
  },500);
</script>
</body>
</html>
